﻿@{
    ViewData["Title"] = "Login";
    Layout = "~/Views/Shared/_VueLayout.cshtml";
}

@section styles{
<style type="text/css">
    .login-pad {
        width: 560px;
        margin: auto;
        height: 360px;
        margin-top: 10%;
        border-radius: 6px;
        box-shadow: 0 0 10px rgba(0,0,0,.36);
    }

    .login-title {
        font-size: 28px;
        font-weight: bold;
        height: 76px;
        line-height: 76px;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }

    .login-content {
        padding: 50px 50px 10px 10px;
    }

    .login-btn {
        width: 100%;
    }
</style>
}

<div id="app">
    <!--
    <el-button v-on:click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Element</p>
    </el-dialog>
    -->
    <div class="login-pad">
        <div class="login-title">书店管理系统</div>
        <div class="login-content">
            <el-form :model="loginForm" status-icon :rules="loginRules" ref="loginFormRef" label-width="100px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username" autocomplete="off">
                        @*<template slot="prepend">用户名</template>*@
                    </el-input>
                </el-form-item>
                <el-form-item label="密 码" prop="password">
                    <el-input type="password" v-model="loginForm.password" autocomplete="off">
                        @* <template slot="prepend">密 码</template>*@
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="login-btn" v-on:click="submitForm('loginFormRef')">登 录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>

@section scripts {
<script>
    var vm = new Vue({
        el: '#app',
        data: function() {
            return {
                visible: false,
                loginForm: {
                    username: "3160410046",
                    password: "123456"
                },
                loginRules: {
                    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
                    password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
                }
            }
        },
        mounted() {
           this.getUser("3160410046");
        },
         methods: {
             async getUser(no) {
                 const { data: res } = await axios.get(`/api/users/${no}`);
                 console.log(res);
             },
             submitForm(formName) {
                 this.$refs[formName].validate(async (valid) => {
                     if (valid) {
                         const { data: res } = await axios.post("/api/users/login", this.loginForm, { headers: { 'Content-Type': 'application/json;charset=UTF-8' } });
                         console.log(res);
                         if (res.code == 0) {
                             return this.$message.success(res.msg);
                         }
                         return this.$message.error(res.msg);
                     }
                     return false;
                 });
             }
        }
    });
</script>
}